<template>
  <div class="Bar-wrap" :style="{ width: width, height: height }">
    <div class="Bar" ref="Bar"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    xAxis: {
      type: Array,
      default: () => [
        "结构化数据条数",
        "文本数量",
        "图片数量",
        "音频数量",
        "视频数量",
      ],
    },
    legend: {
      type: Array,
      default: () => ["wx", "wrj", "ld", "ct"],
    },
    value: {
      type: Array,
      default: () => [
        [54, 12, 23, 45, 36],
        [12, 54, 22, 10, 5],
        [8, 35, 44, 20, 4],
        [5, 8, 9, 9, 3],
      ],
    },
    colors: {
      type: Array,
      default: () => [
        "#38ef7d",
        "#8e2de2",
        "#f953c6",
        "#f2994a",

        "#11998e",
        "#4a00e0",
        "#b91d73",
        "#f2c94c",
      ],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },

  methods: {
    setOptions() {
      this.option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "8%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: this.legend,
          top: 12,
          right: "5%",
          textStyle: {
            color: "#fff",
          },
          itemWidth: 20,
          itemHeight: 15,
        },
        xAxis: {
          type: "category",
          data: this.xAxis,
          axisLine: {
            lineStyle: {
              color: "#3d5269",
            },
          },
          axisLabel: {
            color: "#fff",
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(54, 61, 82, 1)",
            },
          },
        },
        dataZoom: [
          {
            show: true,
            width: 0,
            height: 0,
            xAxisIndex: [0],
            start: 10,
            end: 90,
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: this.legend.map((item, index) => {
          return {
            name: item,
            type: "bar",
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.colors[index],
                  },
                  {
                    offset: 1,
                    color: this.colors[index + this.legend.length],
                  },
                ]),
              },
            },
            label: {
              position: "top",
              fontFamily: "Microsoft YaHei",
              show: true,
              fontSize: 14,
              color: "#fff",
            },
            data: this.value[index],
          };
        }),
      };
      this.chartBar.setOption(this.option);
    },
  },

  mounted() {
    this.chartBar = echarts.init(this.$refs.Bar, null, {
      devicePixelRatio: 2,
    });
    this.setOptions();

    // window.onresize = () => {};

    window.addEventListener("resize", () => {
      this.chartBar.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.Bar-wrap {
  width: 100%;
}
.Bar {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>